<template>
<div id="detail">
    <!-- 导航栏 -->
   <detail-nav-bar class="detail-nav" @titleClick="titleClick"  ref="nav"/>
    <!-- 滑动组件scroll -->
    <scroll class="content" ref="scroll" :probeType='3' @scroll='contentScroll'   >
        <!-- 轮播图组件 -->
   <detail-swiper :top-images="topImages" />
   <!-- 商品描述和价格组件 -->
   <detail-base-info :goods="goods"/>
   <!-- 商家信息组件 -->
   <detail-shop-info :shop="shop" />
   <!-- 商品详情组件 -->
   <detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad" />
   <!-- 商品参数组件 -->
   <detail-param-info :paramInfo="paramInfo" ref="params" />
    <!-- 评论信息 -->
    <detail-comment-info :commentInfo="commentInfo" ref="comment" />
    <!-- 推荐信息 -->
    <goods-list :goods="recommends" ref="lists" />
    </scroll>
    <detail-botton-bar @addToCart="addToCart" @CART="CART" />
     <back-top @click.native="backClick" v-show="isShow"/>
     <!-- <toast :message='message' :show="show" /> -->
   

</div>

  
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper.vue'
import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
import DetailShopInfo from './childComps/DetailShopInfo.vue'
import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
import DetailParamInfo from './childComps/DetailParamInfo.vue'
import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
// import GoodsList from '../../components/content/goods/GoodsList.vue'
import GoodsList from './goods/GoodsList.vue'
import DetailBottonBar from './childComps/DetailBottonBar.vue'


import {getDetail , Goods , Shop , GoodsParam,getRecommend } from 'network/detail'

import {itemListenerMixin,backTopMixin} from 'common/mixin'
import { debounce } from 'common/utils'


import Scroll from 'components/common/scroll/Scroll.vue'
import {mapActions} from 'vuex'
// import Toast from 'components/common/toast/Toast.vue'



export default {
    name:'detail',
  components: { DetailNavBar,DetailSwiper, DetailBaseInfo, DetailShopInfo, Scroll, DetailGoodsInfo, DetailParamInfo, DetailCommentInfo, GoodsList, DetailBottonBar, },

 

       data(){
        return {
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{},
            recommends:[],
            themeTopYs:[],
            getthemeTopY:null,
            currentIndex:0,
            // message:'',
            // show:false
            
            
        }
    },
    mixins:[itemListenerMixin,backTopMixin],
    mounted(){
     
    
    },
    //离开回调的钩子函数
    destroyed(){
        // console.log('dd');
        this.$bus.$off('itemImageLoad',this.itemListen)

    },
    //数据渲染之后执行回调的周期函数
    updated(){
        //不能在这里回调会回调很多次
    //     this.themeTopYs=[]
    //        //商品的offsetTop值
    //   this.themeTopYs.push(0)
    //   //参数的offsetTop值
    //   this.themeTopYs.push(this.$refs.params.$el.offsetTop)
    //   //评论的offsetTop值
    //   this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
    //   //推荐的offsetTop值
    //   this.themeTopYs.push(this.$refs.lists.$el.offsetTop)
    //   console.log(this.themeTopYs);

    },
    
    created(){
        //1.保存传入的iid
        this.iid = this.$route.params.iid
        // console.log(this.iid);
       
       //2.根据iid请求详情的数据
       getDetail(this.iid).then(res => {

        //    console.log(res);
        //1.获取顶部轮播图片的数据
        const data = res.result
        this.topImages = res.result.itemInfo.topImages
        //2.获取商品信息对象
        this.goods = new Goods(data.itemInfo, data.columns,data.shopInfo.services)
        //3.创建店铺信息对象
        this.shop = new Shop(data.shopInfo)
        //4.保存商品详情数据
        this.detailInfo = data.detailInfo
        //5.获取参数信息
        this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
        //6.获取评论信息
        if(data.rate.cRate !== 0){
            this.commentInfo = data.rate.list[0]
            // console.log( this.commentInfo);
        }

        

       })
       //等请求的数据渲染完成之后回调的函数
       this.$nextTick( () => {
           //根据最新的数据，对应的dom已经被渲染出来了
           //但是图片没有加载完成
    //        this.themeTopYs=[]
    //        //商品的offsetTop值
    //   this.themeTopYs.push(0)
    //   //参数的offsetTop值
    //   this.themeTopYs.push(this.$refs.params.$el.offsetTop)
    //   //评论的offsetTop值
    //   this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
    //   //推荐的offsetTop值
    //   this.themeTopYs.push(this.$refs.lists.$el.offsetTop)
    //   console.log(this.themeTopYs);


       })

       //3.请求推荐模块数据
       getRecommend().then(res => {
        //    console.log(res);
        this.recommends = res.data.list
        
       })


       //4.给getthemeTopYs赋值
       //使用防抖函数
       this.getthemeTopY = debounce( () => {
            this.themeTopYs=[]
           //商品的offsetTop值
            this.themeTopYs.push(0)
      //参数的offsetTop值//用el拿到这个组件里面的元素的offsettop值
             this.themeTopYs.push(this.$refs.params.$el.offsetTop)
        //评论的offsetTop值
            this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      //推荐的offsetTop值
            this.themeTopYs.push(this.$refs.lists.$el.offsetTop)
            //最大值
            this.themeTopYs.push(Number.MAX_VALUE)
            // console.log(this.themeTopYs);  

       },100)
    },
    methods:{
        ...mapActions(['addCart']),
           imageLoad(){
              this.$refs.scroll.refresh()
            //   console.log( this.$refs.scroll.refresh);
            //在这个位置获取的offsettop值才正确
               this.getthemeTopY()

            

        },
        titleClick(index){
            // console.log(index);
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],500)
    
        },
        //标题栏跟随位置的变化自动跳转
        contentScroll(position){
            //1.判断backtop是否显示
      this.isShow = position.y < -1000


            // console.log(position);

            //1.获取Y值
            const positionY = -position.y
            //2. 拿到positionY和主题中的y值对比
                //[0, 13732, 15003, 15220，number.max]
                //positonY在 0和13732之间，index=0
                //positonY在 13732和15003之间，index=1
                //positonY在 15003和15220之间，index=2


                //positonY 超过了15220的时候，index=3
                let length = this.themeTopYs.length
                for (let i =0; i< length-1 ; i++){
                    // if(positionY > this.themeTopYs[ parseInt(i) ] && positionY < this.themeTopYs[ parseInt(i)+1]){
                    //     //i+1最后拿不到就是undfinde
                    //     //打印的时候i的值是个string类型 需要进行parseInt（）转换
                    //     console.log(i);
                    // }
                    // if((this.currentIndex !==i && ((i < length -1 && positionY >= this.themeTopYs[ parseInt(i) ] && positionY < this.themeTopYs[ parseInt(i)+1]) || (i === length -1 && positionY >= this.themeTopYs[i])))){
                    //         //  console.log(i);
                    //         this.currentIndex = i 
                    //         // console.log(this.currentIndex);
                    //         this.$refs.nav.currentIndex = this.currentIndex
                    // }
                    //优化,给数组元素最后加一个最大值
                    if((this.currentIndex !== i && (positionY > this.themeTopYs[i] && positionY < this.themeTopYs[i+1]))){
                            this.currentIndex = i 
                            // console.log(this.currentIndex)
                            this.$refs.nav.currentIndex = this.currentIndex
                    }
                   
                }
                

        },
        addToCart(){
            // console.log('dddd');
            //1.获取购物车需要展示的商品信息
            const product = {}
                product.image = this.topImages[0]
                product.title = this.goods.title
                product.desc = this.goods.desc
                product.price = this.goods.realPrice
                product.iid = this.iid
                // console.log(product.title);
                // console.log(product.desc);
                // console.log(product.price);
                //2.将商品加入到购物车里面 (1.Promise 2.mapActions)
                //用vuex 将actions里面的addCart映射过来了可以直接调用这个函数就不需要从srore里面取了
                this.addCart(product).then(res => {
                    // console.log(res);
                    // this.show = true
                    // this.message = res
                    // setTimeout(() => {
                    //     this.show = false,
                    //     this.message = ''
                    // },1500)
                    //点击弹框 调用封装的toast组件
                    this.$toast.show(res,2000)
                    
                })
                // this.$store.commit('addCart',product)
                // this.$store.dispatch('addCart',product).then(res => {
                //     // console.log(res);
                //     //先使用promise判断添加到购物车是否成功
                // })
                
            
            
        },
        CART(){
            this.addToCart()
            this.$router.push('/cart')
        }

       
    }

}
</script>

<style scoped>
#detail{
    position: relative;
    z-index: 99;
    background-color: #fff;
    height: 100vh;
}
.detail-nav{
    position: relative;
    z-index: 99;
    background-color: #fff;
}
.content{
    
    height: calc(100% - 44px - 49px);
}

</style>